<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=700, initial-scale=1, shrink-to-fit=no" />
    <title>山长项目</title> 
    <link rel="icon" href="./favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
     
</head>

<body>
    <div id="home" v-cloak>
        <!-- 头部title -->
        <div class="container">
            <header class="head_top row">
                <div class="col">
                    <h1 class="head_top_tit">山长综合信息管理平台</h1>
                </div>
                <div class="col search">
                    <input class="head_top_inp fr" maxlength="10" type="text" placeholder="请输入关键字"
                        v-model.trim="keyWords" @keyup.enter="goDetails" />
                    <img class="search_img" src="./image/search@2x.png" alt="" @click="goDetails" />
                </div>
            </header>
        </div>
        <!-- 头部导航栏 -->
        <div class="container-fluid nav_back">
            <div class="container">
                <div class="head_nav">
                    <nav class="nav nav-pills nav-justified" id="head_nav">
                        <!-- target="_blank" 新窗口打开 -->
                        <a class="flex-sm-fill text-sm-center nav-link" :class="item.id == 1? 'actives':''"
                            v-for="item in headNav" :key="item.id" :href="item.url">
                            {{item.text}}</a>
                    </nav>
                </div>
            </div>
        </div>
        <!-- banner图 -->
        <div class="container-fluid">
            <div class="banner">
                <!-- <img class="banner_img" src="./image/banner_zi@2x.png" alt="" /> -->
            </div>
        </div>
        <!-- 消息详情栏 -->
        <div class="container-fluid noticeColumnBg">
            <div class="container">
                <div class="notification">
                    <div class="noti_top" @click="goNoticeDetails">
                        <h2>最新通知</h2>
                        <p>{{newNotice.notice_content}}</p>
                    </div>
                    <div class="noti_con row">
                        <div class="noti_con_fl col-6">
                        
                            <div class="swiper_index ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="item in scenerylbt" :key="item.id">  
                                        <img :src="item.images" style="width: 100%; height: 100%;" alt="">
                                    </div>
                                    
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="swiper-pagination"></div>
                                
                                <!-- 如果需要导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                                
                                <!-- 如果需要滚动条 -->
                                <div class="swiper-scrollbar"></div>
                            </div>
                        </div>
                        <div class="noti_con_fr col-6">
                            <div class="noti_con_fr_li">
                                <div class="noti_con_tit">
                                    <span>时政信息</span>
                                </div>
                                <ul class="noti_con_list">
                                    <li class="noti_con_item" v-for="item in indexList.slice(0,5)  " :key="item.id" @click="goMationDetails(item.id)">
                                        <div class="row">
                                            <p class="col-9">
                                                {{item.desc}}
                                            </p>
                                            <span class="col-3">{{item.create_at | indexListTy}}</span>
                                        </div>
                                    </li> 
                                </ul>
                            </div>

                            <div class="noti_con_fr_li">
                                <div class="noti_con_tit">
                                    <span>公示公告</span>
                                </div>
                                <ul class="noti_con_list">
                                    <li class="noti_con_item" v-for="item in noticeLists" :key="item.id">
                                        <div class="row">
                                            <p class="col-9">{{item.notice_content}}</p>
                                            <span class="col-3">{{item.create_time | indexListTy}}</span>
                                        </div>
                                    </li> 
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间展示图 -->
        <div class="container-fluid">
            <div class="con_banner" style="margin: 10px 0"></div>
        </div>
        <!-- 上报信息、地图区 -->
        <div class="container-fluid mounColumnBg">
            <div class="container">
                <div class="report_info">
                    <!-- 上报信息  -->
                    <div class="mountain_deta row">
                        <div class="mountain_deta_fl col-6">
                            <span class="deta_fl">山体信息</span>
                            <ul class="mountain_deta_list">
                                <li style="height: 50%;" class="mountain_deta_item row" v-for=
                                "item in mountainIndex" :key="item.id" @click="mounDetails(item.id)">
                                    <img class="deta_item_img col-4" :src="item.logo" alt="" />
                                    <div class="deta_item_info col-8">
                                        <h6>{{item.mountain_name}}</h6>
                                        <p>
                                            {{item.desc}}
                                        </p>
                                    </div>
                                </li> 
                            </ul>
                        </div>
                        <div class="mountain_deta_fr col-6">
                            <span class="deta_fl">风景名胜</span>
                            <ul class="img_list row">
                                <li class="img_item col-4" v-for="item in slideImgs" :key="item.id">
                                    <img :src="item.images" alt="" />
                                </li> 
                            </ul>
                        </div>
                    </div>
                    <!-- 地图区 -->
                    <div class="report_map">
                        <span class="report_map_tit">定位导航</span>
                        <div class="report_map_con row">
                            <div class="map col-7">
                                <div id="map_container">
                                     
                                </div>
                            </div>
                            <div class="form col-5">
                                <span>起点</span>
                                <input type="text" placeholder="默认显示当前位置(可点击地图获取位置)" ref="curremtPosition">
                                <span>终点</span>
                                <input type="text" @input="searchMoun" v-model="keyWordss" placeholder="输入重点位置地址"> 
                                <ul class="search_result" ref="keyWordss" v-show="keyWordss">
                                    <li class="result_item" v-for="item in wordLists" :key="item.id" v-show="wordLists.length > 0" @click="getCoordinates(item)
                                        ">{{item.mountain_name}}  </li>
                                    <li class="result_item" v-show="wordLists.length == 0">暂无数据</li> 
                                </ul> 
                                <div class="search_form" @click="goBaiduMap">导航</div> 
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 山脉风景 -->
        <div class="container-fluid mountain_back">
            <div class="container">
                <div class="mountain">
                    <div class="mountain_tit row justify-content-between">
                        <span class="tit_fl col-2">山脉风景</span>
                        <!-- <div class="tit_fr col-2"></div> -->
                    </div>
                    <!-- 轮播区域 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper"> 
                            <div class="swiper-slide" v-for="(item,index) in mountainScenery" :key="item.id" @mouseenter='enter(item,index)'>
                                <img class="swiper-slide_img" :src="item.logo" alt="" /> 
                                <div class="maskLayer" v-show="isShowMaskLayer == index">
                                    <h3>{{item.mountain_name}}</h3>
                                    <p>{{item.desc}}</p>
                                </div>
                            </div>
                             
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div> 
                    </div>
                </div>
            </div>
        </div>
        <!-- 山体详情 -->
        <div class="container-fluid noticeColumnBg">
            <div class="container">
                <div class="report_msg">
                    <span class="report_msg_tit">互动参与</span>
                    <ul class="report_msg_list row">
                        <li class="report_msg_item col-6 row" v-for="item in indexAllList" :key="item.id">
                            <img class="msg_item_img col-6" :src="item.image" alt="" />
                            <div class="msg_item_info col-6">
                                <span>山体: {{item.mountain_name}}</span>
                                <span>时间: {{item.create_at | indexListTy}}</span>
                                <p>
                                    {{item.title}}
                                </p>
                            </div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="container-fluid foo_nav_back">
            <div class="container">
                <div class="head_nav">
                    <nav class="nav nav-pills nav-justified" id="head_nav">
                        <!-- target="_blank" 新窗口打开 -->
                        <a class="flex-sm-fill text-sm-center nav-link" :class="item.id == 1? 'actives':''"
                            v-for="item in headNav" :key="item.id" :href="item.url">
                            {{item.text}}</a>
                    </nav>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="container-fluid footerColumnBg">
            <div class="container">
                <footer class="footer">
                    <div class="footer_foo">
                        <h2 class="footer_tit">山长综合信息管理平台</h2>  
                    </div>
                </footer>
            </div>
        </div>
        <!-- 返回顶部按钮 -->
        <div class="back_top" v-show="scrollTop" @click="backtop">
            <img class="back_top_img" src="./image/top.jpg" alt="" />
            <span>返回顶部</span>
        </div>
        <div class="iframeGoToMap" ref="iframeGoToMap">
            <iframe :src="iframeGoToMap"></iframe>
            <div class="gbiframeGoToMap" @click="gbiframeGoToMap">
                <img src="./image/delete.png" alt="">
            </div>
        </div>
    </div>
 
    <!-- vue -->  

    <script src="./js/vue.js"></script>
    <!-- vuex数据管理仓库 -->
    <script src="./js/vuex.js"></script>
    <!-- vuex 数据仓库 -->
    <script src="./utils/store.js"></script>
    <!-- jq -->
    <script src="./js/jquery-3.5.1.min.js"></script>
    <!-- bt -->
    <script src="./js/bootstrap.min.js"></script>
    <!-- bootstrap 插件的js文件 -->
    <script src="./js/popper.min.js"></script>
    <!-- swiper js文件 -->
    <script src="./js/swiper-bundle.js"></script>
    <!-- axios请求 -->
    <script src="./js/axios.min.js"></script>
    <!-- http - axios 全局封装 -->
    <script src="./api/http.js"></script>
    
    <!-- 全局js工具函数以公共js -->
    <script src="./utils/global.js"></script>
    <!-- 请求 -->
    <script src="./api/api.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=tRDdOSph2GpkS5e5Y3rCazS7LxeTgoec"></script>

    <!-- 项目数据 -->
    <script   src="./js/home.js"></script> 
</body>

</html>